import React, { useEffect, useState } from 'react'
import { Button, Space, Table, Tag } from 'antd';
import axios from 'axios'
import {  Checkbox, Form, Input } from 'antd';

function Index() {
  const onFinish = values => {
    console.log('Success:', values);
  };
  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };
  const [list,setdata]=useState([])
  // console.log(data);
  const getdata=()=>{
    axios.get('/api/article/list').then((res)=>{
      console.log(res);
      setdata(res.data.rows)

      
    })
  }
  useEffect(()=>{
    getdata()
  },[])


  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      render: text => <a>{text}</a>,
    },
    {
      title: '搜素',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
    {
      title: 'Action',
      key: 'action',
      render: () => (
        <Space size="middle">
          <Button>删除</Button>
          <Button>编辑</Button>
        </Space>
      ),
    },
  ];
  return (
    <div>
      <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
    layout="inline"
  >
    <Form.Item
      label="搜索的"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>
    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        搜索
      </Button>
    </Form.Item>
  </Form>
      <Table columns={columns} dataSource={list} pagination={{
        
    showSizeChanger:true,
    showQuickJumper:true,
    showTotal:total => `Total ${total} items`
      }}
    />
    </div>
  )
}

export default Index
